<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>a11y.css’ documentation | a11y.css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
    <link rel="stylesheet" href="./static/docs.css?v=1690620346396">
    <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
    <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    </head>
  <body>
    <div class="sr-only-focusable" id="skip-links">
      
      <a href="#content">Skip to content</a>
    </div>
    <header role="banner" id="top" tabindex="-1">
  <a href="." id="logo">
    <svg xmlns="http://www.w3.org/2000/svg" width="90" height="89.905" viewBox="0 0 180 179.81" role="img" aria-labelledby="titre">
      <title id="titre">a11y.css</title>
      <path fill="#ffce00" d="M0 8a8 8 0 0 1 8-8h164a8 8 0 0 1 8 8v163.81a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8z"/>
      <path fill="currentColor" d="M80.83 36.9a10 10 0 0 1 5.06-7.18 7.43 7.43 0 0 1 8.53 1.53 8.76 8.76 0 0 1 2.91 6.18c0 4.71.09 64.9 0 68.32a10.42 10.42 0 0 1-1.77 5.83 8 8 0 0 1-8 3.23c-4-.86-6.63-4.74-6.75-8.71s-.01-69.07.02-69.2zM27 120.87c6-4.4 11.77-9.09 17.83-13.4-4-3.22-7.94-6.52-12.17-9.39-3.62-2.46-8.14-5.36-7-10.42a5.86 5.86 0 0 1 3.8-4.43 7.07 7.07 0 0 1 6.19 1.41c2.23 1.7 22.88 17.71 24.22 19.61a5.75 5.75 0 0 1 .63 5.93 13.16 13.16 0 0 1-5 4.79c-4.37 2.7-17.18 12.84-19.54 14.66a8.32 8.32 0 0 1-6.87 1.74 5.47 5.47 0 0 1-4-5 7.62 7.62 0 0 1 .57-3.52 5.84 5.84 0 0 1 1.34-1.98zm126.43.81c2.18 3.27 1.27 7.87-2.57 9.37-4.27 1.67-8-2.09-11.07-4.4-3.81-2.83-7.55-5.73-11.35-8.57-1.72-1.29-3.48-2.48-5.25-3.71a12.08 12.08 0 0 1-4.18-4.35 5.81 5.81 0 0 1 .42-5.41c1-1.69 23.77-19.87 25.64-20.75a6.78 6.78 0 0 1 5.5-.45 6 6 0 0 1 3.43 4.08c1.29 5.07-3.31 8.09-6.93 10.53-2.08 1.41-10.21 7.81-12.27 9.48 3.42 2.33 16.62 12.48 17.46 13.11a10 10 0 0 0 1.21 1.06zM100 141.25a11 11 0 1 1-11-11 11 11 0 0 1 11 11z"/>
    </svg>
  </a><nav role="navigation" aria-label="Main navigation" class="nav">
  <ul class="list-unstyled">
      <li>
        <a href="./errors.html" class="errors">Errors
        </a>
      </li>
      <li>
        <a href="./warnings.html" class="warnings">Warnings
        </a>
      </li>
      <li>
        <a href="./obsoletes.html" class="obsolete">Obsoletes
        </a>
      </li>
      <li>
        <a href="./advices.html" class="advices">Advices
        </a>
      </li>
      <li>
        <a href="./webextension.html" class="webextension">WebExtension
        </a>
      </li>
      <li>
        <a href="./docs.html" class="sassdoc"><b><abbr title="Application Programming Interface">API</abbr></b> Doc
        </a>
      </li>
      <li>
        <a href="https://github.com/ffoodd/a11y.css">On <b>Github</b><span class="sr-only">&nbsp;(external link)</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
        </a>
      </li>
  </ul>
</nav>
</header>


    <aside role="complementary">
      

      <div class="box hidden-sm">
        <p class="box-title">Web extensions</p>
        <ul class="list-unstyled">
          <li>
            <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" title="a11y.css Firefox add-on">
              <img src="./static/firefox.svg" width="112" height="42" alt="a11y.css Firefox add-on"/>
            </a>
          </li>
          <li>
            <a href="https://microsoftedge.microsoft.com/addons/detail/a11ycss/lkehmahcnhddkdaemngepjckgcjnidpe" title="a11y.css Edge add-on">
              <img src="./static/edge.svg" width="112" height="42" alt="a11y.css Edge add-on"/>
            </a>
          </li>
          <li>
            <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" title="a11y.css Chrome extension">
              <img src="./static/chrome.svg" width="119" height="42" alt="a11y.css Chrome extension"/>
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <main role="main" id="content" tabindex="-1">
      
  <h1>a11y.css’ documentation</h1>

      <h2>Introduction</h2>
<p>Pronounced &quot;Alix&quot;.</p>
<p>This <abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">CSS</abbr> file intends to warn developers about <b>possible risks and mistakes</b> that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.</p>
<p>CSS files are available in French, English, Spanish, Greek, Arabic, Portuguese, Russian, Chinese and Polish — and leveled or full.</p>
<h2>How to use?</h2>
<h3>Web Extension</h3>
<p>Either you're using <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" target="_blank" rel="noopener noreferrer">Firefox <span class="sr-only">(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
<polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
<polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg></a>, <a href="https://microsoftedge.microsoft.com/addons/detail/a11ycss/lkehmahcnhddkdaemngepjckgcjnidpe" target="_blank" rel="noopener noreferrer">Edge <span class="sr-only">(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
<polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
<polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg></a>
or <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" target="_blank" rel="noopener noreferrer">Chrome <span class="sr-only">(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
<polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
<polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg></a>,
you're invited to install and use <a href="https://github.com/ffoodd/a11y.css-webextension" target="_blank" rel="noopener noreferrer">a11y.css's webextension — which has its own repository <span class="sr-only">(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
<polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
<polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg></a>.</p>
<p>It provides some nice features not included in the main CSS file (for now), such as:</p>
<ul>
<li>force focus visibility;</li>
<li>show lang attributes;</li>
<li>check images' alternatives by displaying them;</li>
<li>increase text spacings.</li>
</ul>
<p>As a WebExtension, it also enables to:</p>
<ul>
<li>toggle CSS and change level on the fly,</li>
<li>remember settings for each tab,</li>
<li>automatically update in the background.</li>
</ul>
<h2>Contribution</h2>
<p>If you want to get involved in this project, be sure to <a href="https://github.com/ffoodd/a11y.css/wiki">take a look at its wiki</a>. I'll be pleased to read your issues or pull requests!</p>

    </main>
    <footer role="contentinfo">
  <p class="builtWith box">
      Built with
      <a href="https://www.11ty.dev/">
        Eleventy
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>-
      </a>
      and supported by
      <a href="https://www.jetbrains.com/?from=a11y.css">
        JetBrains
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
      </a>
    </p>
    <div>
      <p>® 2014 —&nbsp;2023 <strong>Gaël Poupard</strong></p>
      <p>This project is distributed under license <a href="https://opensource.org/license/mit/">MIT</a> and <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. <a href="#skip-links">Back to top</a></p>
    </div>
</footer>

    <script src="./static/docs.js?v=1690620346396"></script>
  </body>
</html>
